<template>
  <ul :class="[picLens > 1 ? 'pictures' : 'picture-single']">
    <li v-for="(picture,index) in pictures" :key="'p'+index" class="cell">
      <img class="img" v-lazy="picture.img_src+pictureSize" @click="preview(index)" />
    </li>
  </ul>
</template>

<script>
import { ImagePreview } from 'vant'
export default {
  name: 'PostPictures',
  props: {
    pictures: {
      type: Array
    },
    pictureSize: {
      type: String,
      default: '@268w_356h_1c'
    }
  },
  computed: {
    picUrls () {
      return this.pictures.map(picture => picture.img_src)
    },
    picLens () {
      return this.pictures.length
    }
  },
  methods: {
    preview (index) {
      ImagePreview({
        images: this.picUrls,
        startPosition: index,
        closeable: true
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .pictures,
  .picture-single
  {
    padding: {
      left: rem(10px);
      right: rem(10px);
    }
    margin-bottom: rem(10px);
  }

  .pictures{
    display: flex;
    flex-wrap: wrap;
    .cell {
      flex: 1 0 30%;
      @include cover(112, 112, rem(4px));
      max-width: calc(33.333333% - 6px);
      overflow: hidden;
      margin: 0 rem(3px) rem(6px);
      background: {
        color: $color-grey;
        size: 36%;
        image: url('~@/assets/placeholder.png');
        repeat: no-repeat;
        position: 50%;
      }
    }
  }
  .picture-single{
    .cell {
      display: block;
      @include cover(134, 178, rem(4px));
      width: rem(134px);
      height: rem(178px);
      background: {
        color: $color-grey;
        size: 36%;
        image: url('~@/assets/placeholder.png');
        repeat: no-repeat;
        position: 50%;
      }
      .img {
        object-fit: cover;
        object-position: 50% 50%;
      }
    }
  }
</style>
